<template>
	<!-- 菜品详情页面 -->
	<view class="dish-details">
		<!-- 商品详情轮播 -->
		<view class="banner-box">
			<swiper
			class="banner"
			circular
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="2000" 
			:duration="1000">
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/dish1.png" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/dish2.png" mode=""></image>
			</swiper-item >
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/dish3.png" mode=""></image>
			</swiper-item>
			<swiper-item class="banner-item">
				<image src="../../static/gou-img/dish4.png" mode=""></image>
			</swiper-item>
			</swiper>
		</view>
		<!-- 购物车 -->
		<view class="dish-desc">
			<view class="row1-desc">
				<view class="title">
					<text>农家小炒回锅肉</text>
				</view>
				<view class="sales">
					<text>月售：256</text>	
				</view>
			</view>
			<view class="introduce">
				<text>秘制酱料+新鲜猪肉+独家炒法</text>
			</view>
			<view class="buy-box">
				<view class="price">
					<text>￥37.00</text>
					<text>￥99.99</text>
					<text>5.5折 限时折扣</text>
				</view>
				<view class="cart">
					<text>加入购物车</text>
				</view>
			</view>
		</view>
	    <view class="goods-details">
			<view class="details-title">
				<text>商品详情</text>	
			</view>
			<view class="com-style main-material">
				<text>主料：</text>
				<text>猪肉</text>
			</view>
			<view class="com-style flavor">
				<text>口味：</text>
				<text>微辣</text>
			</view>
			<view class="com-style other-desc">
				<text>其他说明：</text>
				<text>小炒回锅肉主要有三种口味，分别是微辣，中辣，和特辣，因此，在下单的时候，请备注口味。</text>
			</view>
			
		</view>
	    <view class="order-bottom">
			<view class="btn-left">
				<text>外卖点餐</text>
			</view>
			<view class="btn-right">
				<text>预约到店</text>
			</view>
	    	
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.dish-details{
		background-color: #E4E4E4;
		.banner{
			width: 750rpx;
			height: 380rpx;
			.banner-item{
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	    .dish-desc{
			background-color: #fff;
			padding-top: 30rpx;
			.row1-desc{
				display: flex;
				justify-content: space-around;
				.title{
					font-size: 34rpx;
					color: #666666;
				}
				.sales{
					right: 0;
					font-size: 30rpx;
					margin-left: 200rpx;
					color: #333333;
				}
			}
			.introduce{
				margin-top: 20rpx;
				padding-left: 100rpx;
				font-size: 28rpx;
				color: #cccccc;
			}
			.buy-box{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

			    .price{
					text:first-child{
						color: #FF0000;
						font-weight: 600;
						font-size: 36rpx;
						margin-right: 20rpx;
					}
					text:nth-child(2){
						text-decoration: line-through;
						color: #797979;
						font-size: 30rpx;
					}
					text:nth-child(3){
						display: block;
						color: #FF6600;
						margin-top: 16rpx;
						margin-left: 30rpx;
						margin-bottom: 16rpx;
					}
					
				}
			     .cart{
				 	 border: 1px solid #FF6600;
				     width: 180rpx;
					 height: 50rpx;
					 line-height: 50rpx;
					 text-align: center;
					 color: #fff;
					 font-size: 30rpx;
					 background-color: #FF6600;
				     box-shadow: 0 0 1px #C0C0C0;
				 }
			}
		}
	    .goods-details{
			margin-top: 20rpx;
			// width: 750rpx;
			// height: 200rpx;
			background-color: #fff;
			padding-top: 30rpx;
			.details-title{
				border-bottom: 1px solid #8b8b8b;
				padding:0 0 10rpx 20rpx;
				font-size: 40rpx;
			}
			.com-style{
				margin-left:40rpx;
			    margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				text:first-child{
					width: 180rpx;
					color: #8b8b8b;
				}
				text:last-child{
					width: 520rpx;
				}
			    
			}
		}
	    .order-bottom{
			position: absolute;
			width: 750rpx;
			display: flex;
			height: 150rpx;
			bottom: 0rpx;
			line-height: 150rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
			background-color:#82CCCC ;
		   .btn-left{
			   flex: 1;  
			   border-right: 1px solid #fff;
		   }
		   .btn-right{
			   flex:1;
		   }
		}
	}

</style>
